﻿@page "/autofills"

<h3>AutoFill 自动填充组件</h3>

<h4>通过智能感应提示选项，选中后自动填充表单</h4>

<DemoBlock Title="基本用法" Introduction="填充表单" Name="Normal">
    <div class="mb-3">录入 <code>Name</code> 姓名智能提示，选择提示项后自动填充下方表单 目前支持键盘 <kbd>Enter</kbd> <kbd>Spance</kbd> <kbd><i class="fa fa-arrow-up"></i></kbd> <kbd><i class="fa fa-arrow-down"></i></kbd></div>
    <AutoFill TValue="Foo" Value="Model" Items="Items" IsLikeMatch="true" OnSelectedItemChanged="OnSelectedItemChanged" OnGetDisplayText="OnGetDisplayText" class="mb-3" IsSelectAllTextOnFocus="true">
        <Template>
            <div class="d-flex">
                <div>
                    <img src="@Foo.GetAvatarUrl(context.Id)" class="bb-avatar" />
                </div>
                <div class="ps-2">
                    <div>@context.Name</div>
                    <div class="bb-sub">@Foo.GetTitle(context.Id)</div>
                </div>
            </div>
        </Template>
    </AutoFill>
    <img src="@Foo.GetAvatarUrl(Model.Id)" class="shadow" style="width: 140px; margin-bottom: 1rem; border-radius: 6px;" />
    <EditorForm Model="@Model" RowType="RowType.Inline" ItemsPerRow="2" />
</DemoBlock>

<DemoBlock Title="自定义过滤条件" Introduction="通过设置自定义过滤条件回调委托 <code>OnCustomFilter</code> 过滤数据" Name="CustomFilter">
    <div class="mb-3">录入 <code>Name</code> 姓名智能提示，通过设置自定义过滤条件回调委托 <code>OnCustomFilter</code> 过滤数据，当前过滤条件为 <code>Name</code> 包含输入字符串 <b>并且</b> <code>Count</code> 值大于 50</div>
    <AutoFill TValue="Foo" Value="Model" Items="Items" OnCustomFilter="OnCustomFilter"  OnSelectedItemChanged="OnSelectedItemChanged" OnGetDisplayText="OnGetDisplayText" class="mb-3">
        <Template>
            <div class="d-flex">
                <div>
                    <img src="@Foo.GetAvatarUrl(context.Id)" class="bb-avatar" />
                </div>
                <div class="ps-2">
                    <div>@context.Name</div>
                    <div class="bb-sub">@Foo.GetTitle(context.Id)</div>
                </div>
            </div>
        </Template>
    </AutoFill>
    <EditorForm Model="@Model" RowType="RowType.Inline" ItemsPerRow="2" />
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />
